<template>
    <div class="product">
        <div class="head">
            <van-nav-bar :title="info.name" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>

        <!-- 轮播图 -->
        <div class="swipe">
            <van-swipe>
                <van-swipe-item v-for="item in gallery" :key="item.id">
                    <img v-lazy="item.img_url" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <Tiop></Tiop>


        <!-- 商品信息 -->
        <div class="info">
            <h4>{{ info.name }}</h4>
            <div>{{ info.goods_brief }}</div>
            <p>{{ info.retail_price | RMB }}</p>
        </div>

        <!-- 弹出层 -->
        <Popup :info="getInfo" @send="getNum"></Popup>

        <!-- 商品属性 -->
        <div class="attr">
            <div class="title">商品参数</div>
            <ul>
                <li v-for="(item, index) in attribute" :key="index">
                    <span class="name">{{ item.name }}:</span>
                    <span class="val">{{ item.value }}</span>
                </li>
            </ul>
        </div>

        <!-- 信息图片 -->
        <div class="txt" v-html="info.goods_desc"></div>

        <!-- 推荐商品 -->
        <div class="allLook">
            <Title></Title>
            <goodsCart :list="goodsList"></goodsCart>
        </div>

        <!-- 商品导航 -->
        <van-goods-action style="z-index:5000">
            <van-goods-action-icon :icon="star ? 'star' : 'star-o'" :text="star ? '已收藏' : '收藏'"
                :color="star ? '#ff5000' : ''" @click="star = !star" />
            <van-goods-action-icon icon="cart-o" text="购物车" to="/cart" :badge="cartLength" />
            <van-goods-action-button type="danger" text="立即购买" @click="point" />
            <van-goods-action-button type="warning" @click="addCart" text="加入购物车" />
        </van-goods-action>

        <!-- 加载动画 -->
        <Location :show="show"></Location>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { getProduct, getRelated } from "@/api/goods.js"
import Tiop from '@/components/AppTiop';
import goodsCart from '@/components/goodsCart'
import Popup from '@/components/Popup'
import Location from '@/components/Location'
import Title from '@/components/AppTitle'
export default {
    data() {
        return {
            show: true,
            star: true,
            info: {},
            gallery: [],
            attribute: [],
            goodsList: [],
            number: 1,
            cartLength: 0,
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        getNum(num) {
            console.log(num);
            this.number = num
        },
        addCart() {
            let cartList = JSON.parse(localStorage.getItem('mycart') || '[]');
            let index = cartList.findIndex(item => item.id == this.info.id)
            if (index == -1) {
                cartList.push({
                    id: this.info.id,
                    number: this.number,
                    pic: this.info.list_pic_url,
                    price: this.info.retail_price,
                    name: this.info.name,
                    checked: false,
                })
            } else {
                cartList[index].number += this.number;
            }
            this.cartLength = this.cartList.length
            localStorage.setItem('mycart', JSON.stringify(cartList))
            Toast.success('加入购物车成功');
        },
        point() {
            Toast('功能开发中');
        }
    },
    components: {
        Tiop,
        goodsCart,
        Popup,
        Location,
        Title,
    },
    computed: {
        getInfo() {
            return {
                id: this.info.id,
                num: this.info.goods_number,
                pic: this.info.list_pic_url,
                price: this.info.retail_price,
                name: this.info.name,
            }
        }
    },
    async created() {
        let id = this.$route.params.id
        let { data: { data: { info, gallery, attribute } } } = await getProduct({ id })
        this.info = info
        this.gallery = gallery
        this.attribute = attribute
        this.show = false
        this.cartLength = JSON.parse(localStorage.getItem('mycart') || '[]').length;
    },
    async beforeMount() {
        let id = this.$route.params.id
        let { data: { data: { goodsList } } } = await getRelated({ id });
        this.goodsList = goodsList;

    },
}
</script>

<style lang="less" scoped>
.product {
    width: 100%;
    overflow: hidden;
    margin-bottom: 14px;

    .swipe {
        img {
            width: 100%;
        }
    }

    .info {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        text-align: center;
        background-color: #fff;
        border-bottom: 2px solid #f0f0f0;

        h4 {
            font-size: 24px;
            height: 40px;
            line-height: 40px;
        }

        div {
            padding: 5px;
            font-size: 14px;
            color: #333;
        }

        p {
            height: 40px;
            line-height: 40px;
            color: red;
        }
    }

    .attr {
        margin-top: 10px;
        background-color: #fff;
        padding: 10px 2%;

        .title {
            margin: 0;
            font-weight: normal;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        ul {
            font-size: 14px;

            li {
                background-color: #f4f4f4;
                height: 30px;
                line-height: 30px;
                margin-bottom: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 20px;

            }

            .name {
                display: inline-block;
                width: 90px;
                text-align: right;
                color: #666;
            }

            .val {
                margin-left: 5px;
            }
        }
    }

    .allLook {
        margin-top: 10px;
        padding-bottom: 50px;
    }

    .txt {
        width: 100%;

        /deep/img {
            width: 100%;
            display: block;
        }
    }
}
</style>